<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i> 查看门店详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="store" label-width="150px" @submit.native.prevent>
                <el-form-item label="门店名称">
                    <p v-html="store.name"></p>
                </el-form-item>
                <el-form-item label="门店电话">
                    <p v-html="store.telephone"></p>
                </el-form-item>
                <el-form-item label="门店主图">
                    <p v-for="item in store.bannerImg">
                      <img :src="item" style="width:360px;height:180px"/></p>
                </el-form-item>
                <el-form-item label="门店详情图">
                    <p v-for="item in store.detailImg">
                      <img :src="item" style="width:360px;height:180px"/></p>
                </el-form-item>
                <el-form-item label="门店地址">
                    {{ this.store.detailAddress }}
                </el-form-item>
                <el-form-item label="经纬度">
                    {{ this.store.location }}
                </el-form-item>
                <el-form-item>
                    <el-button type='primary' plain style="width:360px" @click = "toList">返回</el-button>
                </el-form-item>
            </el-form>
        </div>


    </div>
</template>
<script>
export default {
    data (){
        return{
            store:{
              id: '',
              name: '',
              telephone:'',//门店电话
              bannerImg: [],
              detailImg:[],
              detail: [],
              detailAddress: '',
              location: ''
            }
        }
    },
    mounted (){
        this.getDeatils();
    },
    methods:{
      // 返回列表
      toList() {
        this.$router.push({path:'/store'})
      },
        getDeatils (){
            if(this.$route.params.id && this.$route.params.id ){
                this.$axios.get('/manage/store/detail', {
                    params: {
                    id: this.$route.params.id
                    }
                })
                .then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        //获取数据
                        var res = response.data.data;
                        // console.log(res)
                        this.store.name = res.name
                        this.store.id = res.id
                        this.store.telephone = res.telephone
                        this.store.location = res.longitude + ',' + res.latitude
                        this.store.detailAddress = res.province + ',' + res.city +','+ res.district +''+ res.address
                        this.store.bannerImg = JSON.parse(res.banner_img)
                        this.store.detailImg = JSON.parse(res.detail)
                    }else{
                        this.$notify.error({
                            title: '查询失败',
                            duration:2000,
                            message: '失败原因：'+ response.data.msg
                        });
                    }
                })
                .catch(function (response) {
                    console.log(response);
                });
            }else{
                this.$message.error('获取门店ID失败');
            }
        }
    }
}
</script>
<style lang="stylus" scoped>

</style>
